<template>
  <div style="position: relative">
    <transition name="fadeInTranslateXLeftLabel">
      <!-- <left-label class="labelc" v-if="$route.path=='/index'"></left-label> -->
    </transition>
    <tip :text="text" v-if="showTip" @config="configDel" @cancel="cancelDel"></tip>

    <blog-item
      class="ItemTestzz"
      v-for="(item, index) in pagenationContent"
      :key="item.id"
      :title="item.title"
      :time="parseInt(item.time)"
      :img="item.img"
      :content="item.content"
      :seeNum="item.seeNum"
      :goodNum="item.goodNum"
      :way="item.way"
      :id="item.id"
      :index="index"
      @click.native="getId(item.id)"
      @mouseenter.native="live2dToMessage(item.title)"
    ></blog-item>
    <pagenation
      v-show="content.length > 0"
      :pageno="pageno"
      :allContent="content"
      @changePageNo="changePageNo"
      @changePageSize="changePageSize"
    ></pagenation>
    <div
      style="
        text-align: center;
        line-height: 40px;
        font-size: 13px;
        font-weight: 200;
        color: #555;
      "
    >
      <a href="https://beian.miit.gov.cn" target="_blank">鄂ICP备20011118号-1</a>
    </div>
  </div>
</template>

<script>
import { state } from "../../store.js";
import Bus from "../../bus";
import BlogItem from "./blog.vue";
import tip from "../../components/tips";
import pagenation from "../../components/pagenation";
import leftLabel from "../index/leftLabel.vue";
export default {
  components: {
    BlogItem,
    tip,
    leftLabel,
    pagenation,
  },
  mounted() {},
  data() {
    return {
      content: [],
      text: "确定要删除吗",
      id: 0,
      allContent: [], //全部内容
      pageno: 1,
      pagesize: 7,
      timer: null,
      // bounds:true
      // pagenationContent:[]
    };
  },
  computed: {
    showTip() {
      return state.showTip;
    },
    pagenationContent() {
      console.log(this.content);
      return this.content.filter((item, index) => {
        return (
          index > (this.pageno - 1) * this.pagesize - 1 &&
          index <= (this.pageno - 1) * this.pagesize - 1 + this.pagesize
        );
      });
    },
  },
  created() {
    this.getBlogList();
    this.getCurrentBlog();
    this.searchBlogByWay();
    this.restartSearch();
  },
  methods: {
    live2dToMessage(title) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        Bus.$emit("BlogTitleTipAboutLive2d", title);
      }, 100);
    },
    changePageSize(pageSize) {
      console.log(typeof pageSize);
      this.pageno = 1;
      this.pagesize = pageSize;
    },
    changePageNo(index) {
      this.pageno = index + 1;
    },
    getId(id) {
      this.id = id;
    },
    configDel() {
      this.$axios
        .post("/blog/del", {
          id: this.id,
          status: this.$store.getters.user.status,
        })
        .then((res) => {
          console.log(res);
          this.getBlogList();
          state.showTip = false;
        });
    },
    cancelDel() {
      state.showTip = false;
    },
    restartSearch() {
      Bus.$on("restartSearch", (msg) => {
        this.getBlogList();
      });
    },
    getBlogList() {
      this.$axios.get("/blog/alllist").then((res) => {
        let currentContent = res.data.data || [];
        this.allContent = currentContent;
        this.content = currentContent;
        let searchContent = currentContent.filter((item, index) => {
          return index <= 7;
        });

        Bus.$emit("searchSevenContent", searchContent);
      });
    },
    //获取搜索的博客
    getCurrentBlog() {
      Bus.$on("search", (msg) => {
        if (msg == "") {
          this.content = this.allContent;
        } else {
          this.content = msg;
        }
      });
    },
    searchBlogByWay() {
      Bus.$on("searchByWay", (msg) => {
        console.log(msg);
        this.pageno = 1;
        this.content = msg;
      });
    },
  },
  beforeDestroy() {
    Bus.$off("searchByWay");
    Bus.$off("search");
    Bus.$off("restartSearch");
  },
};
</script>

<style lang="less" scoped>
// @import url("./css/comment/animate.css");
.labelc {
  position: absolute;
  top: 80px;
  left: 0px;
}
</style>
